<template>
    <div class="container">
        <div class="left-aside-wrap" :class="leftAsideWidth" v-if='!isMobile'>
            <Aside></Aside>
        </div>
        <el-drawer v-else :show-close='false' :visible="isShowDrawer" direction="ltr" :size='200' :with-header="false"
            :before-close="closeDrawer">
            <div class="left-aside-wrap">
                <Aside></Aside>
            </div>
        </el-drawer>
        <div class='main' :class="[isMobile ? '' : mainLeft]">
            <div class="top-header-con">
                <div class="top-header-wrap" :class="[isMobile ? '' : rightAsideWidth]" :style="{ zIndex: headerzIndex }">
                    <Header @openDrawer='openDrawer'></Header>
                </div>
            </div>
            <div class="right-aside-wrap">
                <el-scrollbar class="scrollbar" wrap-class="scrollbar-wrapper">
                    <div class="right-aside-con animate__animated animate__fadeIn">
                        <router-view></router-view>
                    </div>
                </el-scrollbar>
            </div>
        </div>
    </div>
</template>
<script>
// 导入组件
import Aside from '../components/Aside.vue'
import Header from '../components/Header.vue'
export default {
    name: 'index',
    data() {
        return {
            showclass: 'asideshow',
            showtype: false,
            leftAsideWidth: 'left-side-width',
            rightAsideWidth: 'right-side-width',
            mainLeft: 'main-left',
            showDrawer: false,
        }
    },
    // 注册组件
    components: {
        Aside,
        Header
    },
    computed: {
        isMobile() {
            return this.$store.state.isMobile;
        },
        isShowDrawer() {
            return this.$store.state.showDrawer;
        },
        headerzIndex() {
            return this.$store.state.headerZIndex;
        }
    },
    methods: {
        closeDrawer() {
            this.$store.commit('SET_DRAWER_VAL', false);
        },
        openDrawer() {
            this.$store.commit('SET_DRAWER_VAL', true);
        }
    },
    created() {
        // 监听
        this.$root.Bus.$on('toggle', value => {
            if (value) {
                this.leftAsideWidth = 'left-side-width';
                this.rightAsideWidth = 'right-side-width';
                this.mainLeft = 'main-left';
            } else {
                this.leftAsideWidth = 'left-side-toogle-width';
                this.rightAsideWidth = 'right-side-toogle-width';
                this.mainLeft = 'main-toggle-left';
            }
        })
    },
    beforeUpdate() { },
    // 挂载前状态(里面是操作)
    beforeMount() {
        // 弹出登录成功
        // this.$message({
        // 	message: '登录成功',
        // 	type: 'success'
        // })
    }
}
</script>
<style>
.container {
    width: 100%;
    height: 100%;
    position: relative;
}

.main {
    height: 100%;
    -webkit-transition: margin-left .28s;
    transition: margin-left .28s;
    position: relative;
    margin-left: 0;
    overflow: hidden;
}

.main-left {
    margin-left: 200px;
}

.main-toggle-left {
    margin-left: 64px;
}

.left-aside-wrap {
    -webkit-transition: width .28s;
    transition: width .28s;
    width: 200px;
    height: 100%;
    background-color: #20232A;
    position: fixed;
    font-size: 0;
    top: 0;
    bottom: 0;
    left: 0;
    /* z-index: 1001; */
    overflow: hidden;
}

.left-side-width {
    width: 200px;
}

.left-side-toogle-width {
    width: 64px;
}

.top-header-con {
    width: 100%;
    height: 50px;
    position: relative;
    border-bottom: 1px solid #EBEEF5;
}

.top-header-wrap {
    -webkit-transition: width .28s;
    transition: width .28s;
    width: 100%;
    height: 50px;
    position: fixed;
    right: 0;
    top: 0;
    /* z-index:1; */
}

.right-side-width {
    width: calc(100% - 200px);
}

.right-side-toogle-width {
    width: calc(100% - 64px);
}

.right-aside-wrap {
    height: calc(100% - 50px);
    box-sizing: border-box;
}

.scrollbar-wrapper {
    overflow-x: hidden;
}

.right-aside-con {
    padding: 15px;
}

.index-con {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
}

.aside-wrap {
    height: 100%;
    background-color: #001529;
    /* margin: 0px; */
}

.header-wrap {
    width: 100%;
    height: 50px;
}



.index-header,
.index-main {
    padding: 0px;
}
</style>